<template>
  <div class="login_container">
<!--    <img class="background_img"-->
<!--         src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.weiwend.cn%2Fuploads%2Fgoods_album%2F1708%2F30%2F59a68061c15ff.jpg&refer=http%3A%2F%2Fwww.weiwend.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658190041&t=37ca59bfced6d588606adb3813153b44">-->
    <div class="background_c">
      <div class="left_side">
        <el-carousel height="600px" indicator-position="none">
          <el-carousel-item v-for="item in img" :key="item.url">
            <img class="left_side_img" :src="item.url" alt="未加载图片">
          </el-carousel-item>
        </el-carousel>
      </div>


      <div class="login_form">
        <div class="type_tabs">
          <div :class="['a_hover',{'active':login_type}]"
               @click="update_login_type()">
            账号密码登陆
          </div>
          <div :class="['a_hover',{'active':!login_type}]"
               @click="update_login_type()">
            企微扫码登陆
          </div>
        </div>
        <div v-if="login_type">
          <el-form ref="loginFormRef" :model="loginForm" label-width="80px">
            <el-form-item label="用户名：" prop="username"
                          :rules="[{ required: true, message: '用户名未填写',trigger: ['blur', 'change'], },]">
              <el-input v-model="loginForm.username" autocomplete="on" clearable placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password"
                          :rules="[{ required: true, message: '密码未填写',trigger: ['blur', 'change'], },]">
              <el-input type="password" v-model="loginForm.password" autocomplete="off" clearable
                        placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="验证码：" prop="code"
                          :rules="[{ required: true, message: '密码未填写',trigger: ['blur', 'change'], },]"
                          style="margin-bottom: 0">
              <el-input v-model="loginForm.code" autocomplete="off" clearable placeholder="请输入验证码"></el-input>
            </el-form-item>
            <div style="display: flex;justify-content: space-between">
              <img class="sys_avatar" :src="codeUrl" alt="未加载图片"/>
              <el-button link @click="getCode">看不清？点击此处刷新</el-button>
            </div>
            <el-form-item style="display: flex;justify-content: flex-end;">
              <el-button type="primary" @keyup.enter.native="submitForm(loginFormRef)"
                         @click="submitForm(loginFormRef)"
                         style="width: 363.078px">登 陆
              </el-button>
            </el-form-item>
          </el-form>

        </div>
        <div>
          <div v-show="!login_type" id="chart_login" style="text-align: center"></div>
        </div>


      </div>


    </div>

  </div>

</template>


<script setup>

import {ref, reactive, onMounted} from 'vue'
import {getCodeImg, login} from '@/apis/user/user.js'
import {useRouter} from 'vue-router'
import {useLocalStorage} from "@vueuse/core";

const router = useRouter()

const login_type = ref(true)

const loginFormRef = ref(null)
const loginForm = reactive({
  username: 'admin',
  password: 'admin123',
  code: '789',
  codeKey: "",
})

const img = reactive([{
  url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fb%2F0b%2F53e81318886.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658118486&t=d4b45bc78cc29e06b289dc1f883e6da4"
}, {
  url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F17%2F20200217181253_NNY3y.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658119689&t=44d1b5290bfd7bdcad40b4ad7b1d260f"
}, {
  url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F26%2F20171026093534_SQjLJ.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658118003&t=79a6705947cf2211d473d9806130463e"
}])
onMounted(() => {
  getChart();
})


const getChart = () => {
  new WwLogin({
    "id": "chart_login",
    "appid": "wwe9f6a4e657c8bb09",
    "agentid": 1000002,
    "redirect_uri": "https://xielei-yy.com",
    "state": "2345",
    "href": "",
    "lang": "zh",
  });
}


const update_login_type = () => {
  login_type.value = !login_type.value
  console.log(login_type.value)
}


const codeUrl = ref("")
const getCode = () => {
  getCodeImg().then(res => {
    codeUrl.value = import.meta.env.VITE_APP_API + res.data.image_url;
    loginForm.codeKey = res.data.key;
    console.log(codeUrl.value)
  })
}
onMounted(() => {
  getCode();
})


const submitForm = (formEl) => {
  console.log(formEl)
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      login(loginForm).then(res => {
        console.log(res.data.token)
        const userToken = useLocalStorage("token", null,{
          listenToStorageChanges:true
        })
        userToken.value = res.data.token
        localStorage.setItem('tokenName',res.data.userid)
        router.push("/")
      })

    } else {
      console.log('error submit!')
      return false
    }
  })

}

</script>


<style lang="scss">
.login_container {
  height: 100vh;
  min-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;

  .background_img {
    height: 100%;
    width: 100%;
    min-width: 1200px;
    z-index: -1;
    filter: blur(1px);
    position: absolute;
  }

  .background_c {
    height: 600px;
    width: 970px;
    box-shadow: 5px 5px 60px 5px var(--el-color-primary-light-7);
    overflow: hidden;
    border-radius: 10px;
    //border: 2px solid var(--el-border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;


    .left_side {
      width: 437px;

      .left_side_img {
        object-fit: cover;
        height: 100%;
        width: 100%;
      }
    }


    .login_form {
      padding: 50px 80px;
      background-color: var(--el-bg-color);
      width: 533px;
      height: 100%;

      .type_tabs {

        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 30px;

        .a_hover {
          font-size: 18px;
          padding: 22px 30px;
          cursor: pointer;
          //text-align: center;
          border-bottom: 3px solid var(--el-color-success);
          color: var(--el-color-success);
        }

        .active {
          color: var(--el-color-primary);
          border-bottom: 3px solid var(--el-color-primary);
        }
      }

      .el-form-item {
        margin-bottom: 40px;
      }

      .el-input-group__prepend {
        padding: 0;
      }

      .sys_avatar {
        object-fit: cover;
        margin-top: 20px;
        margin-bottom: 50px;
        margin-left: 80px;
        width: 150px;
        height: 70px;
      }
    }
  }
}

</style>
